<script lang="ts" setup>
import { ref, computed, useSlots, onMounted, onBeforeUnmount } from "vue";
import { DCaret, Search as IconSearch } from "@element-plus/icons-vue";
import { shortcuts } from "@/utils/constant";

const slots = useSlots();

interface Props {
   form: object;
   formOptions: FormOptions<{ [key in any]: FormValueOptions }>;
   submitText?: string;
   showSubmit?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
   submitText: "搜索",
   showSubmit: true
});

const emits = defineEmits<{
   (e: "form", form: object): void;
   (e: "submit", form: any): void;
}>();

const form = computed({
   get: () => props.form,
   set: val => emits("form", val)
});
const formOptions = computed(() => props.formOptions);

const haveButtons = ref(!!slots.button);
const formOpen = ref(false);
const contentHeight = ref<number>(62);
const maxheigt = ref<number>(62);
const showFormOpen = ref(false);

function setContentHeight() {
   const formEle = document.getElementById("form");
   const height = formEle?.clientHeight;
   if (height) {
      if (height - 18 > 32) {
         showFormOpen.value = true;
         maxheigt.value = height - 18 + 30;
      } else {
         showFormOpen.value = false;
         maxheigt.value = 62;
      }
   }
}

function submit() {
   emits("submit", form.value);
}

window.addEventListener("resize", setContentHeight);

onMounted(setContentHeight);

onBeforeUnmount(() => window.removeEventListener("resize", setContentHeight));
</script>

<template>
   <div class="queryForm">
      <div class="placeholder shadowCard"></div>
      <div
         class="queryFormContent"
         :style="
            formOpen
               ? `height: ${maxheigt}px; box-shadow:0 0 5px 1px rgba(64, 158, 255, 0.5)`
               : `height: ${contentHeight}px; box-shadow:0 0 5px 1px rgba(64, 158, 255, 0)`
         ">
         <div v-if="showFormOpen" class="icon" @click="formOpen = !formOpen">
            <el-tooltip effect="dark" content="展开/缩进" placement="bottom">
               <Transition name="fade">
                  <el-icon v-if="formOpen" :size="24" color="#2cb1b1"><DCaret /></el-icon>
                  <el-icon v-else :size="24" color="#070f27"><DCaret /></el-icon>
               </Transition>
            </el-tooltip>
         </div>
         <div class="formBox">
            <el-form id="form" class="form" :inline="true">
               <el-form-item v-for="(item, key) in formOptions">
                  <!-- 文本 -->
                  <template v-if="item.type === 'text'">
                     <el-input v-model="form[key]" :placeholder="item.placeholder" clearable @keyup.enter="submit" />
                  </template>
                  <!-- 选择框 -->
                  <template v-else-if="item.type === 'select'">
                     <el-select v-model="form[key]" :placeholder="item.placeholder" clearable filterable>
                        <el-option v-for="son in item.options" :label="son.label" :value="son.value" />
                     </el-select>
                  </template>
                  <!-- 多选选择框 -->
                  <template v-else-if="item.type === 'select-multiple'">
                     <el-select
                        v-model="form[key]"
                        :placeholder="item.placeholder"
                        clearable
                        filterable
                        multiple
                        collapse-tags
                        collapse-tags-tooltip
                        :max-collapse-tags="3">
                        <el-option v-for="son in item.options" :label="son.label" :value="son.value" />
                     </el-select>
                  </template>
                  <!-- 日期 -->
                  <template v-else-if="item.type === 'date'">
                     <el-date-picker
                        v-model="form[key]"
                        clearable
                        type="daterange"
                        unlink-panels
                        :shortcuts="shortcuts"
                        range-separator="至"
                        :start-placeholder="item.placeholders ? item.placeholders[0] : '开始时间'"
                        :end-placeholder="item.placeholders ? item.placeholders[1] : '结束时间'"
                        value-format="YYYY-MM-DD" />
                  </template>
                  <!-- 日期-时间 -->
                  <template v-else-if="item.type === 'datetime'">
                     <el-date-picker
                        v-model="form[key]"
                        clearable
                        type="datetimerange"
                        :shortcuts="shortcuts"
                        range-separator="至"
                        :start-placeholder="item.placeholders ? item.placeholders[0] : '开始时间'"
                        :end-placeholder="item.placeholders ? item.placeholders[1] : '结束时间'"
                        value-format="YYYY-MM-DD HH:mm:ss" />
                  </template>
               </el-form-item>
            </el-form>
         </div>

         <div class="contentRight">
            <el-button v-if="showSubmit" :icon="IconSearch" type="primary" @click="submit">{{ submitText }}</el-button>
            <slot v-if="haveButtons" name="button" :form="form"></slot>
         </div>
      </div>
   </div>
</template>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
   transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
   opacity: 0;
}
.queryForm {
   width: 100%;
   height: auto;
   padding: 0;
   position: relative;
   // overflow: hidden;
   margin-bottom: 15px;
   z-index: 5;
   background-color: #fff;

   .placeholder {
      width: 100%;
      height: 62px;
      border-radius: 5px;
   }
}

.queryFormContent {
   width: 100%;
   height: 32px;
   padding: 15px;
   overflow: hidden;
   box-sizing: border-box;
   position: absolute;
   top: 0;
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   transition:
      height 0.3s ease-in-out,
      box-shadow 0.3s ease-in-out;
   background-color: #fff;
   z-index: 2020;
   border-radius: 5px;
}

.icon {
   cursor: pointer;
   width: 24px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-right: 15px;
   position: relative;

   .el-icon {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
   }
}

.formBox {
   flex: 1;
   overflow: hidden;
   box-sizing: border-box;

   // .el-form {
   //    height: 32px;
   // }
   ::v-deep(.el-form-item) {
      margin-right: 15px;
   }
}

.contentRight {
   flex-shrink: 0;
   margin-left: 15px;
}
</style>
